<template>
  <div id="expire">
    <el-dialog :visible="dialogVisible" width="550px" top="30vh" :center="true">
      <div class="expire_bg" v-if="type == 0">
        <div class="title">服务到期</div>
        <div class="text">
          <span>{{ version }}_{{ enterpriseNum }}</span>
          <span>软件服务已到期,续约请联系15611636263</span>
        </div>
        <div class="btn">
          <el-button class="renew" type="primary" @click="goRenew">立即续约</el-button>
        </div>
        <img src="@/assets/images/expire/bg-2-3.png" alt="" class="close_btn" @click="handleClose" />
      </div>
      <div v-else class="expire_bg type1">
        <div class="title">服务到期提醒</div>
        <div class="text">
          <span>您的软件使用服务即将到期,</span>
          <span
            >到期时间为 <span class="text_storg">{{ endDate }}</span></span
          >
        </div>
        <div class="text">
          <span>请及时联系专属经理与我方签订续约服务合同,</span>
          <span>若为及时续约,到期将无法登录</span>
        </div>
        <div class="btn">
          <el-button class="renew" type="primary" @click="handleClose">知道了</el-button>
        </div>
        <img src="@/assets/images/expire/bg-2-3.png" alt="" class="close_btn" @click="handleClose" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPersonalCenterUrl } from "@/util/util";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0,
    },
    enterpriseNum: {
      type: String,
    },
    version: {
      type: String,
    },
    endDate: {
      type: String,
    },
  },
  methods: {
    goRenew() {
      this.handleClose();
      window.open(getPersonalCenterUrl(this.enterpriseNum));
    },
    handleClose() {
      this.$emit("expireClose");
    },
  },
};
</script>

<style lang="less">
#expire {
  .expire_bg {
    width: 100%;
    height: 300px;
    background-image: url("../../../assets/images/expire/bg-1.png");
    background-repeat: round;
    border-radius: 15px;
    padding: 30px;
    .title {
      font-size: 36px;
      color: #2c45fd;
      font-weight: 600;
    }
    .text {
      display: flex;
      flex-direction: column;
      margin-top: 40px;
      font-size: 16px;
      color: #333333;
      line-height: 25px;
    }
    .btn {
      margin-top: 40px;
      .renew {
        background-color: #6e7be3;
        width: 100px;
        height: 30px;
        font-size: 14px;
        margin: 0 !important;
      }
    }
    .close_btn {
      width: 16px;
      position: absolute;
      top: 16px;
      right: 20px;
      cursor: pointer;
    }
  }
  .type1 {
    .text {
      margin-top: 20px;
      .text_storg {
        font-size: 18px;
        font-weight: 600;
        color: red;
      }
    }
    .btn {
      margin-top: 20px;
    }
  }
  .el-dialog {
    border-radius: 35px;
  }
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0;
  }
}
</style>
